<template>
    <transition name="todoItem" appear>
        <div>
            <li>
                <label>
                    <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
                    <!-- 如下代码也能实现功能 ，但是不太推荐，因为有点违反原则，因为 修改了props -->
                    <!-- <input type="checkbox" v-model="todo.done"/> -->
                    <span v-show="!todo.isEdit">{{ todo.title }}</span>
                    <input v-show="todo.isEdit" type="text" :value="todo.title" 
                        @blur="handleBlur(todo, $event)"
                        ref="inputTitle"/>
                </label>
                <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
                <button class="btn btn-edit" v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
            </li>
        </div>
    </transition>
</template>

<script>
//引入pubsub.js
import pubsub from 'pubsub-js';
export default {
    name: 'MyItem',
    props: ['todo'],
    methods: {
        handleCheck(id) {
        //    this.$bus.$emit('todoCheck',id);
            pubsub.publish('todoCheck',id);
        },
        handleDelete(id) {
            if(confirm('确认删除该条记录吗？')){
                // this.$bus.$emit('deleteTodo',id);
                pubsub.publish('deleteTodo',id);
            }
        },
        //编辑
        handleEdit(todo) {
            //如果todo身上有isEdit属性
            if(todo.hasOwnProperty('isEdit')){
                todo.isEdit = true;
            }else{
                this.$set(todo, 'isEdit', true)
            }
            // 这里使用$nextTick来确保inputTitle已经渲染完成，否则无法获取焦点
            this.$nextTick(() => {
                    this.$refs.inputTitle.focus();
                }
            )
        },
        //失去焦点(真正执行修改逻辑)
        handleBlur(todo, event) {
            todo.isEdit = false;
            if(!event.target.value.trim()) {
                alert('内容不能为空');
                return;
            }
            this.$bus.$emit('updateTodo',todo.id, event.target.value);
        }
    }
}
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }
    li:hover{
        background-color: #ddd;
    }
    li:hover button{
        display: block;
    }

    .todoItem-enter-active {
        animation: fadeIn 1s linear ;
    }

    .todoItem-leave-active {
        animation: fadeIn 1s reverse;
    }
    .fade-enter-active, .fade-leave-active { 
        transition: opacity 0.5s; 
    }
    .fade-enter-from, .fade-leave-to { 
        opacity: 0; 
    }

    @keyframes fadeIn {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0px);
        }
    }
</style>